<template>
	<view class="page-warpper">
		<u-empty text="暂无申请记录" :show="noApplyData" mode="list"></u-empty>
		<view v-show="!noApplyData">
			<view v-for="(item,index) in applyData" :key="index">
				<u-card :title="item.volunteerActivities" @click="toDetail(item, 'Detail')">
					<view class="" slot="body">
						组织单位：{{item.organizationUnit}}
					</view>
					<view class="card-footer" slot="foot">
						<view class="">
							提交时间：{{item.applyDate}}
						</view>
						<view class="status-warpper">
							<image :src="item.icon" class="icon"></image>
							{{item.applyStatusName}}
						</view>
					</view>
				</u-card>
			</view>
		</view>
		<u-button type="primary" @click="toDetail({}, 'Apply')">新增申请</u-button>
	</view>
</template>

<script>
	import userMixins from '@/libs/userMixins.js'
	import gloryMixins from './gloryMixins.js';
	export default {
		mixins: [userMixins, gloryMixins],
		components: {},
		data() {
			let self = this;
			return {
				// 模块前缀
				modulePre: 'volunteer',
				// 申请列表-分页 接口地址
				pageUrl: '/stu/studentVolunteer/pageApply',
			}
		},
		onShow() {
			this.fetchData();
		},
		methods: {
			async fetchData() {
				let params = {
					pageNum: 1,
					pageSize: 100,
					studentNumber: this.user.number
				};
				this.fetchApprovalData(params);
			},
		}
	}
</script>

<style lang="scss" scoped>
.page-warpper {
	background-color: #F7F8FA;
	.card-footer {
		display: flex;
		justify-content: space-between;
		.status-warpper {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}
	}
}
	
</style>
